<!DOCTYPE html>
<html lang="en">
<head>
<title>Ceylon Web IDE</title>
    
<script>
var embedded = ``embedded``;    
var clientid = "``clientId``";
</script>

<meta name="viewport" 
      content="width=device-width,maximum-scale=2.0,initial-scale=1.0,minimum-scale=0.5,user-scalable=yes"/>
<meta charset="utf-8"/>

<link rel='stylesheet' type='text/css'
      href='//fonts.googleapis.com/css?family=Source+Sans+Pro|PT+Sans|PT+Sans:700|Inconsolata|Inconsolata:700'/>
<link rel='stylesheet' media='screen, projection' type='text/css' href='main.css'/>
<!--[if lt IE 8]>
<link media='screen, projection' rel='stylesheet' type='text/css'
      href='//ceylon-lang.org/stylesheets/ie.css'/>
<![endif]-->
<link rel='stylesheet' type='text/css' href='scripts/w2ui-1.4.3.css'/>
<link rel='stylesheet' type='text/css' href="scripts/codemirror.css"/>
<link rel='stylesheet' type='text/css' href='scripts/autocomplete.css'/>
<link rel='stylesheet' type='text/css' href="scripts/cm-ceylon-dark.css"/>
<link rel='stylesheet' type='text/css' href="scripts/cm-ceylon.css"/>
<link rel='stylesheet' type='text/css' href='scripts/jquery-ui-1.11.2.css'/>
<link rel='stylesheet' type='text/css' href='scripts/jquery-ui-1.11.2.structure.css'/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>

<script type="text/javascript" src="scripts/codemirror.js" charset="utf-8"></script>
<script type="text/javascript" src="scripts/mode/clike/clike.js" charset="utf-8"></script>
<script type="text/javascript" src="scripts/mode/javascript/javascript.js" charset="utf-8"></script>
<script type="text/javascript" src="scripts/mode/markdown/markdown.js" charset="utf-8"></script>
<script type="text/javascript" src="scripts/active-line.js" charset="utf-8"></script>
<script type="text/javascript" src="scripts/closebrackets.js" charset="utf-8"></script>
<script type="text/javascript" src="scripts/matchbrackets.js" charset="utf-8"></script>
<script type="text/javascript" src="scripts/autocomplete.js" charset="utf-8"></script>
<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery-cookie-1.4.1.js"></script>
<script type="text/javascript" src="scripts/w2ui-1.4.3.min.js"></script>
<script type="text/javascript" src="scripts/URI.min.js"></script>
<script type="text/javascript" src="scripts/marked.min.js"></script>
<script type="text/javascript" src="scripts/github.js"></script>
<script type="text/javascript" src="scripts/repl.js"></script>
    
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-24748553-3', 'auto');
  ga('send', 'pageview');

</script>
</head>

<body>

<div id="all"></div>

<div id="holder" class ="invis">

<!-- Small header bar for mobile screens -->
<div id="header-bar-small" class="bp header-bar">
  <div id="header">Ceylon Web IDE</div>
</div>
<!-- header-bar-small -->

<!-- Header bar for large screens -->
<div id="header-bar" class="bp header-bar">
  <div id="header">
    <a id="header-logo" href=".">
      <h1 id="ceylon">Ceylon</h1>
    </a>
    <div id="header-tagline">
      <p id="say_more_more_clearly">Say more, more clearly</p>
    </div>
  </div>
  <div class="badges">
    <div class="badge">
        <a href="https://twitter.com/ceylonlang" 
           class="twitter-follow-button" 
           data-show-screen-name="false">
           Follow @ceylonlang
        </a>
        <script type="text/javascript">
          !function(d,s,id){
            var js,fjs=d.getElementsByTagName(s)[0];
            if(!d.getElementById(id)){
              js=d.createElement(s);
              js.id=id;
              js.src="//platform.twitter.com/widgets.js";
              fjs.parentNode.insertBefore(js,fjs);
            }
          }(document,"script","twitter-wjs");
        </script>
      </div>
      <div class="badge">
        <div class="g-follow" 
             data-annotation="bubble" 
             data-height="20" 
             data-href="https://plus.google.com/102481741611133754149" 
             data-rel="publisher">
        </div>
        <script type="text/javascript">
          (function() {
            var po = document.createElement('script');
            po.type = 'text/javascript';
            po.async = true;
            po.src = 'https://apis.google.com/js/platform.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(po, s);
          })();
        </script>
      </div>
      <div class="badge">
        <div class="fb-like" 
             data-href="https://www.facebook.com/ceylonlang" 
             data-layout="button_count" 
             data-action="like" 
             data-show-faces="false" 
             data-share="true"></div>
      </div>
      <script type="text/javascript">
        (function(d,s,id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js=d.createElement(s);
          js.id=id;
          js.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
      </script>
  </div>
</div>
<!-- header-bar -->

<!-- Editor -->
<div id="core-page">
    <div id="editortabs"></div>
    <div id="editorspane"></div>
</div>
<!-- core-page -->

<!-- template for creating new editors -->
<div id="editor-template" class="codeeditor invis"></div>

<!-- template for creating the canvas tab -->
<div id="canvas-template" class="invis">
  <canvas></canvas>
</div>

<!-- template for creating a preview tab -->
<div id="preview-template" class="bp mdpreview invis">
  <div class="mdpreview-content"></div>
</div>

<!-- template for creating a help tab -->
<div id="help-template" class="bp helptab invis">
  <div class="helptab-content ceylonblock">
    
    <h3>Editor keyboard shortcuts</h3>
    <ul>
      <li>Autocompletion: <code>Ctrl-Space</code>
      <li>Documentation: <code>Ctrl-D</code> / <code>Cmd-D</code> (Mac)
      <li>Save All: <code>Ctrl-S</code> / <code>Cmd-S</code> (Mac)
    </ul>

    <h3>GitHub connect</h3>
    Use the <i class="fa fa-github"></i> button to connect to your GitHub account
    so you can store and retrieve your code.
    <h3>Sharing your code with others</h3>
    Click the <i class="fa fa-share"></i> button and a window will appear with
    links that either lead to this page pre-filled with the code you're currently
    editing (the code needs to be saved on GitHub first or to GitHub itself where
    you can manage the code directly.
    <h3>Advanced mode</h3>
    By default you're editing in "Simplified" mode, this means that you get just
    a single source file where you can immediately start typing Ceylon code without
    having to care or even know about the requirements for a full-fledged program.
    But it's comes with a couple of limitations like not being able to import other
    modules. For this you need to switch to "Advanced" mode. NB: once you switch
    to advanced mode and start making changes you most likely cannot switch back!
  </div>
</div>

<!-- Output window -->    
<div id="output"><iframe 
  id="outputframe" 
  srcdoc="<!DOCTYPE html><html><head><title>Runner</title><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/><link rel='stylesheet' media='screen, projection' type='text/css' href='runner.css'/><script type='text/javascript' src='scripts/require.js' data-main='scripts/runner.js'></script></head><body><div id='output'></div></body></html>">
</iframe></div>

<!-- Right sidebar with examples list -->
<div id="sidebar" class="bp trompon ceylonblock">
  <!-- collapses -->
  <div id="sidebarhandle" class="w2ui-toolbar">
    <table cellpadding="0" cellspacing="0"
           title="Hide side bar"
           class="w2ui-button"
           onclick="var el=w2ui['all_main_toolbar']; if (el) el.click('resize', event);"
           onmouseover="$(this).addClass('over');"
           onmouseout="$(this).removeClass('over').removeClass('down');"
           onmousedown="$(this).addClass('down');"
           onmouseup="$(this).removeClass('down');">
      <tbody>
        <tr>
          <td>
            <table cellpadding="1" cellspacing="0">
              <tbody>
                <tr>
                  <td>
                    <div class="w2ui-tb-image">
                      <span class="fa fa-angle-double-right"></span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- the actual list -->
  <div id="sidebarblock" class="sidebar-block">
      <div></div>
  </div>
</div>
<!-- sidebar -->

<!-- footer with copyright info -->
<div id='footer-bar' class='footer-bar bp'>
    <div id='footer'>
        <div id='footer-core'>
            <div id="powered">
                <p>The 
                <a href="http://github.com/ceylon/ceylon-web-ide-backend">Ceylon Web IDE</a>
                is powered by
                <a href="http://github.com/ceylon/ceylon-js">Ceylon JS</a>, 
                <a href="http://openshift.redhat.com">OpenShift</a>,
                <a href="http://requirejs.org">RequireJS</a>,
                <a href="http://codemirror.net">CodeMirror</a>,
                <a href="http://jquery.com">jQuery</a>,
                <a href="http://w2ui.com">w2ui</a>, and
                <a href="https://github.com">GitHub</a>.</p>
            </div>
            <div id='copyright'>
                <p id='copyright_copy_2010_2015_red...'>
                  Copyright &copy; 2010-2015, Red Hat, Inc. 
                  or third-party contributors &mdash;
                  Ceylon is a trademark of Red Hat, Inc. &mdash;
                  <a href='http://www.redhat.com/legal/legal_statement.html'>Terms of use</a> &mdash; 
                  <a href='http://www.redhat.com/legal/privacy_statement.html'>Privacy policy</a>
                </p>
            </div>
        </div>
    </div>
</div>
<!-- footer -->


<pre id="result" class="invis"></pre>

</div>
<!-- holder -->

</body>
</html>
